<template>
  <swiper
    :slides-per-view="1"
    :space-between="50"
    :modules="m"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    :autoplay="{ delay: 1000 }"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script setup>
// Import Swiper Vue.js components
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import { ref } from "vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/autoplay";

const m = [Autoplay];

const onSwiper = (swiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};
</script>
